<template>
  <div>
    我是首页{{ is_admin }}
    <button @click="logout">退出</button>
    <button v-if="store.hasPermission('article:search')">搜索文章</button>
    <button v-if="store.hasPermission('article:edit')">编辑文章</button>
    <button v-permission="'article:search'">搜索文章--自定义指令按钮</button>
    <button v-permission="'article:edit'">编辑文章--自定义指令按钮</button>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { userMenuListStore } from '@/store/index'
/**
* 仓库
*/
const store = userMenuListStore()
const { btnList, is_admin } = toRefs(store)
/**
* 路由对象
*/
const route = useRoute();
/**
* 路由实例
*/
const router = useRouter();
/**
* 数据部分
*/
const data = reactive({})

const logout = () => {
  localStorage.clear()
  console.log(localStorage.getItem('btnList')); // Check if this returns null
  router.push('/login')
}
// 用户权限信息
const hasPermission = (permission) => {
  const hasPermission = store.btnList.some(item => item.includes(permission));
  return hasPermission;
};

onBeforeMount(() => {
  //console.log('2.组件挂载页面之前执行----onBeforeMount')
})
onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
})
watchEffect(() => {
})
defineExpose({
  ...toRefs(data)
})

</script>
<style scoped lang='scss'>
div {
  width: 200px;
  height: 500px;
  color: red;
}
</style>